<template>
  <div class="login-container">
    <el-form class="login-form" :model="loginForm" :rules="loginFormRules" ref="loginFormRef" label-width="100px">
      <h2 class="login-title">梦学谷会员管理系统</h2>
      <el-form-item label="账号" prop="userId">
        <el-input v-model="loginForm.userId" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitLoginForm">登录</el-button>
        <el-button @click="resetLoginForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import loginApi from './../../api/login'
export default {
  data () {
    return {
      loginForm: {
        userId: '',
        password: ''
      },
      // 登录页面的验证规则
      loginFormRules: {
        userId: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 点击登录按钮
    submitLoginForm () {
      this.$refs.loginFormRef.validate(valid => {
        if (valid) {
          // 1,登录
          loginApi.login(this.loginForm.userId, this.loginForm.password).then(response => {
            const resp = response.data
            console.log(resp)
            if (resp.flag) {
              this.$message.success('登录成功')
              // 2，登录成功之后，要获取用户信息，并且将信息存入浏览器缓存
              loginApi.getUserInfo(resp.data.token).then(response => {
                const resp2 = response.data
                console.log(resp2.data)
                if (resp2.flag) {
                  // JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串，
                  // 而JSON.parse()可以将JSON字符串转为一个对象
                  // 这里不能只存name,方便后面退出系统修改密码的时候还需要用户的id
                  localStorage.setItem('username', JSON.stringify(resp2.data))
                  localStorage.setItem('token', JSON.stringify(resp.data.token))
                  // 保存信息之后，进行页面跳转
                  this.$router.push('/')
                } else {
                  this.$message.error('获取信息失败')
                }
              })
            } else {
              this.$message.error('登录失败')
            }
          })
        } else {
          return false
        }
      })
    },
    // 点击重置按钮
    resetLoginForm () {
      this.$refs.loginFormRef.resetFields()
    }
  }
}
</script>
<style scoped>
.login-container{
  position: absolutive;
  /* width: 100%;
  height: 100%; */
  /* 这个不加上，始终图片无法撑满全屏 */
  overflow: hidden;
  top:0px;
  left:0px;
  bottom: 0px;
  right: 0px;
  background: url('./../../assets/img/login.jpg');
}
.login-form{
  width: 350px;
  background: rgba(255, 255, 255, 0.8);
  margin: 160px auto;
  padding: 30px;
  border-radius: 20px;
}
.login-title{
  text-align: center
}
</style>
